<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax渲染表格.html</title>
     <style>
      table,th,td{
        border:1px solid lightblue;
   }
      table{
         width: 100%;
         border-collapse:collapse;
   }
    th,td{
        height: 30px;
    }
     tbody tr:hover{
        background-color:yellow!important;
    }
    tbody tr:nth-child(2n+1){
        background-color:#ccc;
    }
    </style>
    <script>
      !function(){
             window.onload = function(){
                var xhr = new XMLHttpRequest();
                xhr.open('get','./user.json',true);
                xhr.send();

                xhr.onreadystatechange = function(){
                  if(xhr.readyState ==4 && xhr.status==200){
                    render(JSON.parse(xhr.responseText))
                  }
                }
                
                var render = function(response){
                var table = document.querySelector('table');
                var trStr = '';
                var trArr=[];
                var i ;
                var data = response.data;//(拿到函数response中的data)
                var list = data.list;//(//拿到data下的list)
                var total =data.total;//(拿到data下的total)
                var len = list.length;
                var name;
                var index;
                
                for(var i =0;i<len;i++){ 
                    trArr.push(
                         '<tr>',
                              '<td>',list[i].username,'</td>',
                              '<td>',list[i].name,'</td>',
                              '<td>',list[i].age,'</td>',
                              '<td>',list[i].gender,'</td>',
                              '<td>',list[i].moblie,'</td>',
                              '<td>','<button class="del-btn" data-name="',list[i].name,'">删除</button>',
                              '<button>修改</button>',
                              '<button>查看</button>',
                              '</td>',
                             
                        '</tr>'
                        );
                } 
               
                table.getElementsByTagName('tbody')[0].innerHTML = trArr.join('');
              }; 
              var myTable = document.getElementById('myTable');
              
              myTable.onclick = function(e){
                var target = e.target;
                if(target.className=="del-btn"){
                   alert(target.getAttribute('data-name'));

                }

              };
            
            };
        
        }();
    </script>
</head>
<body>
     <table id ="myTable">
       <thead>
         <tr>
             <th>用户名</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>手机号</th>
             <th>操作</th>
         </tr>
       </thead>
       <tbody></tbody>
     </table>
</body>
</html>